:local(.DropdownButton) {

  white-space: nowrap;

  .dropdown-opener {
    position: relative;
    margin: -5px -5px -5px 2px;
    padding: 5px 5px 5px 1px;
  }

  &.multi-button .dropdown-opener {

    margin-left: 4px;
    padding-left: 3px;
  }

  &.multi-button.active,
  &.multi-button:hover {
    .dropdown-opener:before {
      content: '';
      background: var(--color-cccccc);
      box-shadow: 0 0 1px var(--color-eeeeee);
      width: 1px;
      height: 80%;
      position: absolute;
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .caret {
    margin-left: 5px;
    margin-top: -3px;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 3px dashed;
    border-top: 3px solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
  }

  > .dropdown {
    position: absolute;
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 24px;
    background: var(--color-ffffff);
    border: solid 1px var(--color-cccccc);
    z-index: 1000;

    > .item {
      display: block;
      width: 100%;
      white-space: nowrap;
      padding: 0 5px;
      cursor: pointer;

      &:hover {
        background: var(--silver-darken-94);
      }
    }
  }
}
